<template>
  <div class="right-content">
    <div class="top-box">
      <div class="jiaotongdiv">
        <databox :title="'告警信息'" :dheight="'100%'" color="F8FC00" icon="daibanshixiang">
          <jiaotongshijian/>
        </databox>
      </div>
      <div class="shijiandiv">
        <databox
          :title="'事件警告'"
          :dheight="'100%'"
          style="margin: 0px;"
          color="#E5A111"
          icon="tixingshixin"
        >
          <div class="shijiantitle">
            <div style="text-align: center;">
              <icon-svg type="qiche" size="40px" color="#05D5FB"></icon-svg><br/>
              交通事件告警<br/>
              {{5}}条
            </div>
            <div style="text-align: center;">
              <icon-svg type="ranqibiao_shiti" size="40px" color="#00BFAF"></icon-svg><br/>
              严重设备故障<br/>
              {{5}}条
            </div>
            <div style="text-align: center;">
              <icon-svg type="-zhongdaweixian" size="40px" color="#E5A111"></icon-svg><br/>
              地质灾害<br/>
              {{5}}条
            </div>
          </div>
          <shijian/>
        </databox>
      </div>
      <div class="eluediv">
        <databox
          :title="'恶劣天气'"
          :dheight="'100%'"
          style="margin: 0px;"
          color="#E7EAF4"
          icon="xinhao"
        >
          <tianqi/>
        </databox>
      </div>
      <div class="suidaodiv">
        <databox
          :title="'环境监测'"
          :dheight="'100%'"
          style="margin: 0px;"
          color="#00BFAF"
          icon="jinggai"
        >
          <suidao/>
        </databox>
      </div>
    </div>
  </div>
</template>

<script>
import suidao from "./chart/suidao";
import shijian from "./chart/shijian";
import message from "./message";

import jiaotongshijian from './jiaotongshijian'
import tianqi from './tianqi'

export default {
  components: {
    suidao,
    message,
    shijian,
    jiaotongshijian,
    tianqi
  },
  props: {},
  data() {
    return {};
  },
  created() {
    // this.getData(this.username)
  },
  methods: {},
  watch: {}
};
</script>

<style lang="scss">
.right-content {
  width: 100%;
  height: 100%;
  .top-box {
    height: 100%;
    .jiaotongdiv {
      height: 17%;
    }
    .shijiandiv {
      height: 38%;
      padding: 10px 0px;
      .shijiantitle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
      }
    }
    .eluediv {
      height: 20%;
      padding: 0px 0px 10px 0px;
    }
    .suidaodiv {
      height: 25%;
    }
  }
}
</style>